<template>
	<view>
		<van-cell-group>
			<!-- 使用 v-for 循环遍历 list 数组，渲染每个 van-cell -->
			<van-cell v-for="(item, index) in props.list" :key="index" use-label-slot clickable @click="goPath(item)">
				<!-- 使用 v-slot 语法定义 icon 插槽 -->
				<template #icon>
					<view class="message-list-icon">
						<van-icon name="chat" size="50" color="#999" />
					</view>
				</template>
				<!-- 使用 v-slot 语法定义 title 插槽 -->
				<template #title>
					<view class="flex justify-between">
						<view class="message-list-title">
							{{ item.title }}
						</view>
						<view class="message-list-time" v-if="item.time">
							{{ item.time }}
						</view>
					</view>
				</template>
				<!-- 使用 v-slot 语法定义 label 插槽 -->
				<template #label>
					<view class="message-list-label flex-1">
						{{ item.label }}
					</view>
				</template>
			</van-cell>
		</van-cell-group>
	</view>

</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits
	} from 'vue';
	// 定义组件的 props
	const props = defineProps({
		active: {
			type: String,
			default: 'service'
		},
		list: {
			type: Array,
			default: []
		}
	});

	const goPath = (item) => {
		let currentItem = JSON.stringify(item);
		console.log(item, 'url')
		if (item.url) {
			uni.navigateTo({
				url: item.url
			})
			return
		}
		let path = {
			service: '/package/pages/messageList/messageList',
			message: `/package/pages/dialogBox/dialogBox?info=${currentItem}`
		};

		uni.navigateTo({
			url: path[props.active]
		})
	}
</script>

<style scoped>
	.message-list-icon {
		padding-right: 20rpx;
		/* 图标右侧的内边距 */
	}

	.message-list-title {
		font-size: 32rpx;
		/* 标题的字体大小 */
	}

	.message-list-time {
		font-size: 28rpx;
		/* 时间的字体大小 */
		color: #999;
		/* 时间的字体颜色 */
	}

	.message-list-label {
		font-size: 28rpx;
		/* 标签的字体大小 */
		color: #999;
		/* 标签的字体颜色 */
	}
</style>